
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
    <title></title>
    <link href="js/bstable/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="js/bstable/css/bootstrap-table.css" rel="stylesheet" type="text/css">
    <link href="css/table.css" rel="stylesheet" type="text/css" />
    <script src="/js/vue.js"></script>
    <script src="/js/axios.min.js"></script>
    <style>
        .notice_nav a:nth-child(3){border-top-right-radius: 0;border-bottom-right-radius:0}
        .notice_nav a:nth-child(4){border-top-right-radius: 4px;border-bottom-right-radius: 4px}
    </style>
</head>
<body style="background-color: #ecf0f5;font-family: 微软雅黑;color: #475059;min-width: 1000px;overflow: auto">
<div class="notice_main" id="app">
    <script src="js/jquery/jQuery-2.2.0.min.js"></script>
    <script src="js/bstable/js/bootstrap.min.js"></script>
    <script src="js/bstable/js/bootstrap-table.js"></script>
    <script src="js/bstable/js/bootstrap-table-zh-CN.min.js"></script>
    <script src="js/layer_v2.1/layer/layer.js"></script>

    <div class="notice_check">
        <div class="btn-group l_left" style="margin-right: 4px">
            <select v-model="applicant_id" class="form-control" name="applicant_id">
                <option value="0">---请选择---</option>
                <option v-for="applicant in applicantList"  v-bind:value="applicant.applicant_id" >
                    {{applicant.state}}
                </option>
            </select>
        </div>
        <div class="l_left">
            <input type="text" v-model="name"  name="title" class="form-control" placeholder="请输入用户名">
        </div>
        &nbsp;&nbsp;<button type="button" @click="queryPost" class="btn btn-primary">查询</button>
    </div>
    <br>
    <div>
        <table class="table table-bordered  table-hover">
            <tr>
                <th type="radio">选择</th>
                <th>用户名</th>
                <th>账号状态</th>
                <th>操作</th>
            </tr>
            <tr v-for="(item,index) in applicantList" >
                <td><label>
                    <input type="checkbox" id="inline_checkbox1" value="true">
                </label></td>
                <td>{{item.applicant_name}}</td>
                <td>{{item.state}}</td>
                <td> <a @click="">拉黑</a> | <a @click="">驳回举报</a></td>
            </tr>
        </table>
    </div>
</div>
</body>
</html>
<script>
    new Vue({
        el:"#app",
        data:{
            name:'',
            state_id:0,
            stateInfo:[],
            applicantList:[]
        },
        methods:{
            queryPost:function(){
                _this=this
                axios.get('/app/list', {
                    params: {
                        applicant_name: this.name,
                        state_id:this.state_id
                    }
                })
                    .then(function (response) {
                        _this.applicantList=response.data;
                        //console.log(response.data);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
        },
        mounted(){
            _this = this
            //查询帖子的信息
            axios.get('/app/list',{
                params:{
                    applicant_name:this.name,
                    state_id:this.state_id
                }
            })
                .then(function (response) {
                    _this.applicantList = response.data;
                    console.log(response.data);
                })
                .catch(function (error) {
                    console.log(error);
                });
            //查询状态信息
            axios.get('/appstate/list')
                .then(function (response) {
                    _this.stateInfo = response.data;
                    console.log(_this.stateInfo);
                })
                .catch(function (error) {
                    console.log(error);
                });
        }
    })
</script>

